<template>
  <main>
    <button @click="countPa++">父组件点击+1</button>
    <TheWelcome v-model="countModel" @handle1="handle" :name="name" ref="handleRef">
    <span>我是slot</span>
   
    <template v-slot:name>
      我是具名插槽
    </template>
    </TheWelcome>
    <button @click="handleClick">点击跳转</button>
    <button @click="gotomouse">去鼠标位置页面</button>
    <p><button @click="router.push('/pricticeHook')">练习vueuse各种hook</button></p>
    <div>
      <button @click="router.push('/mobile')">去手机页面</button>
      <button @click="router.push('/virtualKeyboard')">去虚拟键盘页面</button>
      <button @click="router.push('/tabSlide')">去tab页滑动页面</button>
      <button @click="router.push('/vModel')">v-model练习页面</button>
    </div>
    <h1 style="margin-top: 40px;">纵向滚动</h1>
    <div class="scrollDiv">
      <ul class="scrollUl">
        <li class="scrollLi"  v-for="(item,index) in scrollList" :key="index">{{ item }}</li>
      </ul>
    </div>
    <button @click="setValue">测试js文件传参 点击赋值</button>
    <button @click="router.push('/loadMore')">触底加载页面</button>
    <button @click="router.push('/drag')">拖拽页面</button>
  </main>
</template>
<script setup>
import TheWelcome from '../components/TheWelcome.vue'
import router from '@/router';
import { ref, reactive,provide } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { setCeshi } from './index'
const name = ref('pqf')
const countPa = ref(0)
const countModel = ref('')
const store = useCounterStore()
const animationScroll = ref('-150px')
const primaryColor = ref('pink')
const scrollList = reactive([
  '我是滚动数据1',
  '我是滚动数据2',
  '我是滚动数据3',
  '我是滚动数据4',
  '我是滚动数据5',
  '我是滚动数据6',
  '我是滚动数据7',
  '我是滚动数据8',
  '我是滚动数据9',
])
const {increment} = store
// const plp = {
//   name: 'xvx'
// }
provide('countPa',countPa)
const handleRef = ref(null)

const handleClick = () => {
  // increment()
  // handleRef.value.sonClick()
  router.push({
    path:'/about',
    query:{
      name:'pqf'
    }
  })
}
const gotomouse = ()=>{
  console.log('点击了');
  router.push({
    path:'/mouse',
    query:{
      name:'pqf'
    }
  })
}
const handle = () => {
  console.log('子页面点击了');
}
const setValue = ()=>{
  setCeshi('112')
  router.push('/vModel')
}
// setInterval(() => {
  
// }, interval);
</script>
<style scoped>
  .scrollDiv {
    width:600px;
    height: 300px;
    background-color:v-bind(primaryColor);
    overflow: hidden;
    position: relative;
  }
  .scrollLi {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }
  .scrollUl {
   animation: animation1 3s linear infinite;
  }
  .scrollUl:hover {
    /* animation-play-state: paused; */
  }
  @keyframes animation1{
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(v-bind(animationScroll));
    }
  }
</style>
